<template>
<div>
    <el-table
        :data="IndexProductsTable"
        style="width: 100%">
            <el-table-column
                prop="id"
                label="商品ID"
                width="70">
            </el-table-column>
            <el-table-column
                prop="title"
                label="商品标题"
                width="550">
            </el-table-column>
            <el-table-column
                prop="price"
                label="商品价格"
                width="150">
            </el-table-column>
            <el-table-column
                prop="buyer"
                label="购买人数"
                width="150">
            </el-table-column>
            <el-table-column
                prop="category"
                label="商品分类"
                width="150">
            </el-table-column>
            <el-table-column
                prop="product_id"
                label="商品ID"
                width="100">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="success" @click="dialogFormVisible = true;setid(scope.row.id)" size="small">替换</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="选择将要替换商品的分类" :label-width="formLabelWidth">
                    <el-select v-model="form.product_category" placeholder="选择将要替换商品的分类">
                        <el-option label="电脑" value="computer"></el-option>
                        <el-option label="手机" value="phone"></el-option>
                        <el-option label="平板" value="table_computer"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="输入将要替换商品的ID" :label-width="formLabelWidth">
                    <el-input v-model="form.product_id" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false;updateit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "topproduct",
    data() {
      return {
        IndexProductsTable: [],
        dialogFormVisible: false,
        form: {
          id: '', //原ID
          product_id: '' ,//现Id
          product_category: '' //现分类
        },
        formLabelWidth: '200px'
      }
    },
    mounted(){
        if(this.$cookies.get("topproduct_second") != 'ok'){
            alert("无权限");
            this.$router.push("/adminindex")
        }else{
            this.$axios.get("/api/getAllIndexProducts").then(res=>{
                this.IndexProductsTable = res.data
            });
        }
    },
    methods:{
        updateit(){
            this.$axios.post("/api/changeIndexProduct",this.$querystring.stringify({
                id:this.form.product_id,
                category:this.form.product_category,
                lastid:this.form.id
                })).then(reponse=>{
                console.log(reponse);
                if(reponse.data == true){
                     alert("修改成功")
                }else{
                    alert("修改失败")
                }
            })
        },
        setid(id){
            this.form.id = id;
        }
    }
}
</script>

<style scoped>

</style>